<template>
  <div v-title="'支付结算 - 世外生活运营平台'">
    <div class="withdraw-list">

    <div class="PublicListStyle">
      <mk-search-component :formArr="formArr"  inputPlaceholder = "流水号/店铺名称/客户名称" @startSearch="fun_call_search">
      </mk-search-component>

      <div class="tabContainer"  v-loading="isLoading" element-loading-text="拼命加载中">
        <div class="total-box">
          <el-row :gutter="10">
            <el-col :span="6">
              <div class="total-item">
                <div class="total-num">{{ totalData.totalTransactionMoneyStr }}</div>
                <div class="total-name">累计交易金额（元）</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="total-item">
                <div class="total-num">{{ totalData.totalTakeMoneyStr }}</div>
                <div class="total-name">累计提现金额（元）</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="total-item">
                <div class="total-num">{{ totalData.totalCommissionMoneyStr }}</div>
                <div class="total-name">累计交易分佣（元）</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="total-item">
                <div class="total-num">{{ totalData.canTakeMoneyStr }}</div>
                <div class="total-name">可提现金额（元）</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div class="primary_bg">
          <el-table :data="tableData.elements"
                    @row-click="openDetail">
            <el-table-column prop="number" label="流水号" width="120px"></el-table-column>

            <el-table-column prop="seller" label="店铺名称" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.seller.shopName }}
              </template>
            </el-table-column>

            <el-table-column prop="seller" label="客户名称" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.seller.name }}
              </template>
            </el-table-column>

            <el-table-column prop="takeMoneyDate" label="提现时间" width="160px">
              <template slot-scope="scope">
                {{ scope.row.takeMoneyDate | filterTime }}
              </template>
            </el-table-column>

            <el-table-column prop="takeMoneyStr" label="提现金额(元)"></el-table-column>
            <el-table-column prop="commissionMoneyStr" label="交易分佣(元)"></el-table-column>
            <el-table-column prop="realTakeMoneyStr" label="实际打款(元)"></el-table-column>

            <el-table-column prop="status" label="打款状态" width="100px">
              <template slot-scope="scope">
                {{ scope.row.status | filterStatus }}
              </template>
            </el-table-column>

            <el-table-column width="80px">
              <template slot-scope="scope">
                <el-button type="text" class="handle-btn"
                           v-if="scope.row.status==='WaitPlayMoney'">处理</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination v-if="tableData.totalAmount > 0"
                         :current-page="tableData.page" :total="tableData.totalAmount"
                         :page-size="tableData.size" layout="total, prev, pager, next"
                         @current-change="loadListPage"></el-pagination>
        </div>
      </div>
    </div>

    <!--申请详情-->
    <mk-withdraw-deposit-detail :dialog-visible="detailDialogVisible"
                                :detail-info="rowDetail"
                                @submitSuccess="submitSuccess"
                                @closeDialog="detailDialogVisible=false"></mk-withdraw-deposit-detail>
  </div>
  </div>
</template>

<script>
  import MkWithdrawDepositDetail from'./MkWithdrawDepositDetail.vue'
  import settlementService from '../../../services/settlement'

  export default {
    name: 'withdrawDepositList',
    components: {
      MkWithdrawDepositDetail
    },
    props: ['activeName'],
    watch: {
      activeName: function (value) {
        if (this.activeName === 'all') {
          this.loadListPage(1);
          this.loadTotalNumber();
        }
      }
    },

    filters: {
      filterStatus (value) {
        if (value === 'WaitPlayMoney') {
          return '未打款';
        } else if (value === 'PlayMoneyed') {
          return '已打款';
        } else {
          return '';
        }
      },
      filterTime (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    },

    mounted: function () {
      this.$set(this.formArr,1,{
        formLabel:'提现日期',
        split:'-',
        placeholder:{first:'选择开始日期',second:'选择结束日期'},
        searchName:{first:'start',second:'end'},
        hasTwoComponent:true,
        dataType:'date',
        dataFormat:'yyyy-MM-dd',
        componentType:'Date',
        pickerOptions:{
          first:{
            disabledDate(time) {
              return time.getTime() > new Date();
            }
          },
          second:{
            disabledDate(time) {
              return time.getTime() > new Date();
            }
          }

        }
      });
      this.$set(this.formArr,0,{
        formLabel:'打款状态',
        searchName:'status',
        dataType:'string',
        componentType:'Select',
        optionsArr: [
          {name:'未打款',value:'WaitPlayMoney'},
          {name:'已打款',value:'PlayMoneyed'},
        ]
      })
    },

    methods :{
      fun_call_search(search,input) {
        this.searchInfo.start = search.start ? new Date(search.start).pattern('yyyy-MM-dd'):'';
        this.searchInfo.end = search.end ? new Date(search.end).pattern('yyyy-MM-dd'):'';
        this.searchInfo.status = search.status;

        this.searchInfo.searchText = input;
        let that = this;
        this.formArr[1].pickerOptions.first.disabledDate = function(time){
          const date = new Date();
          if (that.searchInfo.end) {
            return time.getTime() > date || time.getTime() > new Date(that.searchInfo.end);
          } else {
            return time.getTime() > date;
          }
        }
        this.formArr[1].pickerOptions.second.disabledDate = function(time){
          const date = new Date();
          if (that.searchInfo.start) {
            return time.getTime() > date || time.getTime() < new Date(that.searchInfo.start).getTime() - 3600 * 1000 * 24;
          } else {
            return time.getTime() > date;
          }
        }

        this.loadListPage(1);
      },
      loadListPage (page) {
        if (page) {
          this.searchInfo['page.pn'] = page;
        }

        if (!this.detailDialogVisible && !this.formDialogVisible) {
          this.isLoading = true;
        }
        settlementService.loadWithdrawDepositListServer (this.searchInfo, (data)=> {
          this.tableData = data.data;
          this.isLoading = false;
        });
      },

      loadTotalNumber () {
        settlementService.loadWithdrawDepositTotalServer ((data) => {
          this.totalData = data.data;
        });
      },
      openDetail (row) {
        this.rowDetail = row;
        this.detailDialogVisible = true;
      },

      submitSuccess () {
        this.loadListPage();
        this.loadTotalNumber();
      }
    },

    data () {
      let that = this;
      return {
        formArr:[],
        isSearchFocus: false,
        isLoading: false,
        detailDialogVisible: false,
        formDialogVisible: false,
        isAdd: true,
        searchInfo: {
          start: '',
          end: '',
          searchText: '',
          status: '',
          'page.pn': 1,
          'page.size': 10,
          fields: 'commissionMoneyStr,id,number,operator,realTakeMoneyStr,remark,status,takeMoneyDate,takeMoneyStr,transferDate,transferNumber,seller[name:bankAddress:shopName:company:bankCardNumber:tradingBank:openBankBranch]'
        },
        tableData: {},
        totalData: {},
        rowDetail: {
          seller: {}
        },
        pickerOptionsStart: {
          disabledDate(time) {
            return time.getTime() > new Date() || time.getTime() > new Date(that.searchInfo.end);
          }
        },
        pickerOptionsEnd: {
          disabledDate(time) {
            return time.getTime() > new Date() || time.getTime() < new Date(that.searchInfo.start);
          }
        },
      }
    }
  }
</script>

<style lang="less">
  @import '../../../assets/style/main.less';
  .withdraw-deposit-list {
    .separator-icon {
      padding: 0 5px;
      color: @fontColorThree
    }
    .tabContainer{
      padding-top:30px;
    }
    .total-box {
      margin-bottom: 10px;
    }
    .total-item {
      height: 150px;
      background-color: #faf9f9;
      padding-left: 40px;
    }
    .total-num {
      padding-top: 30px;
      font-size: 32px;
      color: @fontColorOne;
    }
    .total-name {
      padding-top: 10px;
      font-size: 18px;
      color: @fontColorThree;
    }
    .handle-btn {
      padding: 0 10px;
      &:hover {
        .my-opacity(0.8);
      }
    }
  }
</style>
